<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>角色管理</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../../resource/css/layui.css">
	<link rel="stylesheet" href="../../../resource/css/common.css">
	<style type="text/css">
	.left-operatearea{
		width: 78%;
	    float: left;
	}
	.right-menutree{
		min-width: 200px;
        margin: 10px auto;
		width: 20%;
	    float: right;
	}
	.xtree_contianer {
        width: 300px;
        border: 1px solid #9C9C9C;
        overflow: auto;
        margin-bottom: 30px;
        background-color: #fff;
        padding: 10px 0 25px 5px;
    }
	</style>
</head>
<body>
	<div class="left-operatearea">
		<div class="rolefrom" style="font-size: 14px;">
			角色名:
			<div class="layui-inline">
				<input class="layui-input" name="name" id="name" autocomplete="off">
			</div>
			角色编码:
			<div class="layui-inline">
				<input class="layui-input" name="code" id="code" autocomplete="off">
			</div>
			<button class="layui-btn" data-type="add" id="add">新增</button>
			<button class="layui-btn layui-btn-normal" data-type="reload">查询</button>
			<button class="layui-btn layui-btn-normal" data-type="assign">分配资源</button>
			<button class="layui-btn layui-btn-normal" data-type="authorize">配置角色用户</button>
		</div>
		<table id="tb" class="canScroll" lay-filter="roletable-filter"></table>
	</div>
	<div class="right-menutree">
		<form class="layui-form">
			<div id="xtree" class="xtree_contianer"></div>
		</form>
	</div>
	<script type="text/html" id="roleTool">
	    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
		{{# if(d.state == 0){ }}
 			<a class="layui-btn layui-btn-normal" lay-event="open">启用</a>
		{{# }else{ }}
 			<a class="layui-btn layui-btn-warm" lay-event="stop">停用</a>
		{{# } }}
	    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="indexTpl">
    	{{d.LAY_TABLE_INDEX+1}}
	</script>
	
	<script src="../../../resource/js/layui.js"></script>
	<script src="../../../resource/js/xtree.js"></script>
	<script type="text/javascript">
		var xtreeJson = [];
		var xtree;
		layui.use(['table','form'], function(){
			var table 	= layui.table;
			var form 	= layui.form;
			var $ 		= layui.$ || parent.window.mod.jquery;
			var index = layer.load(1, {
				shade: [0.6,'#000'] //透明度 色值
			});
			setTimeout(function(){layer.close(index)}, 5000);
			table.render({
				elem: $('#tb'),				// 表格元素
				id: 'tb',
				url	: localStorage.serverHttp+'/base/auth/role/getRoles?_token='+(new parent.window._user()).getData('token'),		// 请求路径
				page: true,						// 是否开启分页
				limit: 10,						// 默认一页显示个数
				limits: [10],				// 每页显示个数的可选值
				loading: true,					// 切换 是否 显示loading
  				even: true,						// 开启隔行背景
  				method: 'get',					// 请求类型 默认get
  				where: {						// 请求的其他参数(除开page和limit)
  					name: $('#name').val(),
  					code:$('#code').val()
				},
				cols: [[						// 表头
					{checkbox: true}
					,{field: '', title: '序号',templet: '#indexTpl', width: 120}
				    ,{field: 'name', title: '角色名', width: 120}
				    ,{field: 'code', title: '角色编码', width: 120}
				    ,{field: 'note', title: '备注', width: 120}
				    ,{field: 'state', title: '状态', width: 120}
				    ,{field: '', title: '操作',toolbar:"#roleTool", width:300}
				]],
				done: function(res, curr, count){// 加载完table后执行的方法 res：返回数据 curr：当前页码 count：一页显示个数
					parent.window.resizeIframe(window.frameElement, document.getElementsByTagName('html')[0]);
					parent.window.tableHeaderFixed($, this.elem, 0, true);
					layer.close(index);
					//处理状态列
					$("[data-field='state']").children().each(function(){  
				        if($(this).text()=='0'){  
				           $(this).text("停用")  
				        }else if($(this).text()=='1'){  
				           $(this).text("启用")  
				        }  
					});
				}
			}); 
			table.on('checkbox(roletable-filter)', function(obj){
				//加载对应角色拥有的所有权限数据
				if(obj.checked){
					var roleId = obj.data.id;
					$.ajax({
				    	url: localStorage.serverHttp+'/base/auth/role/getRoleResource?_token='+(new parent.window._user()).getData('token'),
				    	type: 'get',
				    	dataType: 'json',
				    	data: {
				    		roleId:roleId
				    	}
				    })
				    .done(function(res) {
				    	xtree.cleanAllNodeCheckStatus();
				    	if(res && res.length>0){
				    		for(var i=0;i<res.length;i++){
				    			xtree.checkNode(res[i].id);
				    		}
				    	}
				    });
				}else{
					xtree.cleanAllNodeCheckStatus();
				}
			});
			table.on('tool(roletable-filter)', function(obj){
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象
				
				if(layEvent === 'edit'){ //编辑
					var editInputs = [
						//表头名(field),显示名(title),表单类型(type),显示形式(display),验证条件(verify),提示文字(placeholder),默认初始值(value),请求路径(url),请求参数(data),固定选项(options),宽度(width),id(id属性值),readonly(只读属性，select元素无效)，rule(转换规则)
						{'field': 'id', 'title': 'ID', 'type': 'input-text', 'display': 'none','value': obj.data.id, 'width': '150px','id':'editId'},
						{'field': 'name', 'title': '角色名称', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'value': obj.data.name, 'width': '150px','id':'editName'},
						{'field': 'code', 'title': '角色编码', 'type': 'input-text', 'display': 'block', 'verify': 'required','value': obj.data.code, 'width': '150px','readonly':true,'id':'editCode'},
						{'field': 'state', 'title': '状态', 'type': 'select', 'display': 'block', 'verify': 'required', 'placeholder': '角色状态', 'value': obj.data.state,'options': [0,1],rule: {0:'停用', 1:'启用'}, 'id': 'editState'},
						{'field': 'note', 'title': '备注', 'type': 'textarea', 'display': 'block', 'verify': 'required', 'placeholder': '填写备注描述', 'value':obj.data.note, 'width': '300px','id':'editNote'}
					];
					parent.window.layerOpenParams($, layer, editInputs, 'editRoles', editRoles);
					form.render();
					$('#editState').next().width('150px');
				} else if(layEvent === 'stop'){ //停用
					layer.confirm('你确定要停用该角色吗？', {
						btn: ['确定','关闭'] //按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp+'/base/auth/role/stop?_token='+(new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			roleId : data.id
				    		}
				    	})
				    	.done(function(res) {
				    		layer.msg('停用成功');
				    		active.reload.call();
				    	});
					});
				} else if(layEvent === 'open'){ //启用
					layer.confirm('你确定要启用该角色吗？', {
						btn: ['确定','关闭'] //按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp+'/base/auth/role/open?_token='+(new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			roleId : data.id
				    		}
				    	})
				    	.done(function(res) {
				    		layer.msg('启用成功');
				    		active.reload.call();
				    	});
					});
				} else if(layEvent === 'del'){ //删除
					layer.confirm('你确定要删除该角色吗？', {
						btn: ['确定','关闭'] //按钮
					},
					function(){
						$.ajax({
				    		url: localStorage.serverHttp+'/base/auth/role/delete?_token='+(new parent.window._user()).getData('token'),
				    		type: 'post',
				    		dataType: 'json',
				    		data:{
				    			roleId : data.id
				    		}
				    	})
				    	.done(function(res) {
				    		layer.msg('删除成功');
				    		active.reload.call();
				    	});
					});
				}
			});
			active = {
				reload: function(){
					//执行重载
					table.reload('tb', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
						,where: {
							name: $('#name').val(),
		  					code:$('#code').val()
						}
					});
				},
				add: function(){
					var addInputs = [
						//表头名(field),显示名(title),表单类型(type),显示形式(display),验证条件(verify),提示文字(placeholder),默认初始值(value),请求路径(url),请求参数(data),固定选项(options),宽度(width),id(id属性值),readonly(只读属性，select元素无效)，rule(转换规则)
						{'field': 'name', 'title': '角色名称', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入角色名称', 'value': '', 'width': '150px','id':'addName'},
						{'field': 'code', 'title': '角色编码', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入角色编码', 'value': '', 'width': '150px','id':'addCode'},
						{'field': 'state', 'title': '角色状态', 'type': 'input-text', 'display': 'block', 'verify': 'required', 'placeholder': '请输入角色编码', 'value': '启用', 'width': '150px','readonly':true},
						// {'field': 'state', 'title': '状态', 'type': 'select', 'display': 'block', 'verify': 'required', 'placeholder': '角色状态', 'value': '1', 'url': '', 'data': {}, 'options': ['0','1'],rule: {0:'停用', 1:'启用'}, 'id': 'selectState'},
						{'field': 'note', 'title': '备注', 'type': 'textarea', 'display': 'block', 'verify': 'required', 'placeholder': '填写备注描述', 'value': '', 'width': '300px','id':'addNote'}
					];
					parent.window.layerOpenParams($, layer, addInputs, 'addRoles', addRoles);
					form.render();
					//$('#selectState').next().width('150px');	// select只能单独提出来写样式
				},
				assign: function(){
					//获取选择的角色
					var roleData = table.checkStatus('tb').data;
					if(roleData.length>1){
						layer.open({
					        title: false
					        ,closeBtn:false
					        ,offset: ['40px', '500px']
					        ,content: '只能选择一个角色分配资源权限'
					        ,btn: '确定'
					        ,btnAlign: 'c' //按钮居中
					        ,shade: 0.8 //不显示遮罩
					        ,yes: function(index, layero){
					          layer.close(index);
					        }
					      });
						return;
					}
					if(roleData.length==0){
						layer.open({
					        title: false
					        ,closeBtn:false
					        ,offset: ['40px', '500px']
					        ,content: '请选择一个角色分配资源权限'
					        ,btn: '确定'
					        ,btnAlign: 'c' //按钮居中
					        ,shade: 0.8 //不显示遮罩
					        ,yes: function(index, layero){
					          layer.close(index);
					        }
					      });
						return;
					}
					var oCks = xtree.GetAllChecked(); //获取全部选中资源节点，返回的为Array
					var msg = '';
					var resIds = "";
					if(oCks.length==0){
						msg = "你确定删除角色【 "+roleData[0].name+"("+roleData[0].code+") 】对应的所有资源权限吗？";
					}else{
						var resMsg="[ ";
						for (var i = 0; i < oCks.length; i++) {  
							resIds += ","+oCks[i].value;  
							resMsg += oCks[i].title+",";
						}
						resMsg = resMsg.substring(0,resMsg.length-1)
						msg = "你确定给角色【 "+roleData[0].name+"("+roleData[0].code+") 】分配"+resMsg+" ]等资源权限吗？";
					}
					resIds = resIds.substring(1);
					var roleId = roleData[0].id;
					var index = layer.open({
				        type: 0
				        ,title: "提示"
				        ,offset: ['40px', '500px']
				        ,area: '300px;'
				        ,shade: 0.8
				        ,id: 'resroleass' //设定一个id，防止重复弹出
				        ,btn: ['保存', '关闭']
				        ,btnAlign: 'c'
				        ,moveType: 1 //拖拽模式，0或者1
				        ,content: msg
				        ,yes: function(){
				        	$.ajax({
						    	url: localStorage.serverHttp+'/base/auth/role/insertRoleRes?_token='+(new parent.window._user()).getData('token'),
						    	type: 'post',
						    	dataType: 'json',
						    	data:{
						    		roleId:roleId,
						    		resIds:resIds
						    	}
						    })
						    .done(function(res) {
						    	if(res.status==1){
						    		layer.msg('资源权限分配成功！');
							    	layer.close(index);
						    	}
						    });
				        }
			       });
				},
				authorize:function(){
					//获取选择的角色
					var roleData = table.checkStatus('tb').data;
					if(roleData.length>1){
						layer.open({
					        title: false
					        ,closeBtn:false
					        ,offset: ['40px', '500px']
					        ,content: '只能选择一个角色授权给用户'
					        ,btn: '确定'
					        ,btnAlign: 'c' //按钮居中
					        ,shade: 0.8 //不显示遮罩
					        ,yes: function(index, layero){
					          layer.close(index);
					        }
					      });
						return;
					}
					if(roleData.length==0){
						layer.open({
					        title: false
					        ,closeBtn:false
					        ,offset: ['40px', '500px']
					        ,content: '请选择一个角色分配用户'
					        ,btn: '确定'
					        ,btnAlign: 'c' //按钮居中
					        ,shade: 0.8 //不显示遮罩
					        ,yes: function(index, layero){
					          layer.close(index);
					        }
					      });
						return;
					}
					//1、查询系统中所有用户，table显示
					//2、查询该角色拥有的用户，并选中
					var html = '<table id="authorizetb" class="canScroll" lay-filter="authorizetable-filter"></table>'
					layer.open({
						type: 1,
						title:'角色名:'+roleData[0].name,
						content: html,
						btn: ['保存', '关闭'],
						offset: ['40px', '300px'],
						area: ['900px', '500px'],
						btnAlign: 'c',
						yes: function(index, layero){
							var userCheck = table.checkStatus('authorizetb').data;
							var userIds = "";
							if(userCheck.length>0){
								for(var i=0;i<userCheck.length;i++){
									userIds += ","+userCheck[i].id;
								}
								userIds = userIds.substring(1);
								//保存用户角色关系
								$.ajax({
							    	url: localStorage.serverHttp+'/base/auth/role/insertRoleUser?_token='+(new parent.window._user()).getData('token'),
							    	type: 'post',
							    	dataType: 'json',
							    	data:{
							    		roleId : roleData[0].id,
							    		userIds: userIds
							    	}
							    })
							    .done(function(obj) {
							    	layer.msg("分配成功");
							    	layer.close(index);
							    });
							}else{
								//删除原有用户角色关系
								$.ajax({
							    	url: localStorage.serverHttp+'/base/auth/role/insertRoleUser?_token='+(new parent.window._user()).getData('token'),
							    	type: 'post',
							    	dataType: 'json',
							    	data:{
							    		roleId : roleData[0].id,
							    		userIds: userIds
							    	}
							    })
							    .done(function(obj) {
							    	layer.msg("删除原有所有用户成功");
							    	layer.close(index);
							    });
							}
						},
						success: function(layero, index){
							table.render({
								elem: $('#authorizetb'),				// 表格元素
								id: 'authorizetb',
								url	: localStorage.serverHttp+'/base/auth/user/getAll?_token='+(new parent.window._user()).getData('token'),		// 请求路径
								page: true,						// 是否开启分页
								limit: 10,						// 默认一页显示个数
								limits: [10],				// 每页显示个数的可选值
								loading: true,					// 切换 是否 显示loading
				  				even: true,						// 开启隔行背景
				  				method: 'get',					// 请求类型 默认get
				  				where: {						// 请求的其他参数(除开page和limit)
				  					/* name: $('#name').val(),
				  					code:$('#code').val() */
								},
								cols: [[						// 表头
									{checkbox: true,templet: '#checkboxTpl'}
								    ,{field: 'loginName', title: '登录名', width: 120}
								    ,{field: 'userName', title: '用户姓名', width: 120}
								    ,{field: 'sex', title: '性别', width: 120}
								    ,{field: 'phone', title: '电话', width: 130} 
								    ,{field: 'email', title: '邮箱', width: 190} 
								    ,{field: 'isValid', title: '状态', width: 120}
								]],
								done: function(res, curr, count){// 加载完table后执行的方法 res：返回数据 curr：当前页码 count：一页显示个数
									parent.window.resizeIframe(window.frameElement, document.getElementsByTagName('html')[0]);
									parent.window.tableHeaderFixed($, this.elem, 0, true);
									console.log("res:"+JSON.stringify(res));
									//处理性别列
									$("[data-field='sex']").children().each(function(){  
								        if($(this).text()=='0'){  
								           $(this).text("女")  
								        }else if($(this).text()=='1'){  
								           $(this).text("男")  
								        }  
									});
									//处理状态列
									$("[data-field='isValid']").children().each(function(){  
								        if($(this).text()=='0'){  
								           $(this).text("停用")  
								        }else if($(this).text()=='1'){  
								           $(this).text("启用")  
								        }  
									});
									//获取角色拥有的用户
									$.ajax({
								    	url: localStorage.serverHttp+'/base/auth/role/getRoleAllUser?_token='+(new parent.window._user()).getData('token'),
								    	type: 'get',
								    	dataType: 'json',
								    	data:{
								    		roleId : roleData[0].id
								    	}
								    })
								    .done(function(obj) {
								    	//角色拥有的用户
								    	var roleUser = obj.data;
								    	if(roleUser.length>0){
								    		for(var i=0;i< res.data.length;i++){
							                    for (var j = 0; j < roleUser.length; j++) {
							                        //数据id和要勾选的id相同时checkbox选中
							                        if(res.data[i].id == roleUser[j].id){
							                        	//这里才是真正的有效勾选
							                            //res.data[i]["LAY_CHECKED"]='true';
							                            //找到对应数据改变勾选样式，呈现出选中效果
							                            var index= res.data[i]['LAY_TABLE_INDEX'];
							                          	//模拟checkbox选中功能
							                            var checkbox = $('#authorizetb').next().find('.layui-table tr[data-index="'+index+'"] td input');
							                            checkbox.next().click();
							                        }
							                    }
								    		}
							                        	
								    	}
								    });
								}
							});
						}
					});
				}
			};
			
			$('.rolefrom .layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			
		 	$.ajax({
		    	url: localStorage.serverHttp+'/base/auth/resource/getAllResource?_token='+(new parent.window._user()).getData('token'),
		    	type: 'get',
		    	dataType: 'json'
		    })
		    .done(function(res) {
		    	if ( res.status && 1 === res.status ) {
		    		xtreeJson = ConvertToTreeGridJson(res.data, "id", "parentId");
		    		initXTree();
		    	}
		    });
		 	//新增角色
		 	function addRoles(fromId,index){
		 		var name = $('#addName').val();
		 		var code = $('#addCode').val();
		 		var note = $('#addNote').val();
		 		$.ajax({
			    	url: localStorage.serverHttp+'/base/auth/role/add?_token='+(new parent.window._user()).getData('token'),
			    	type: 'post',
			    	dataType: 'json',
			    	data : {
			    		name: name,
			    		code: code,
			    		note: note
			    	}
			    })
			    .done(function(res) {
			    	if (res) {
			    		if(1 == res.status){
			    			layer.msg("新增角色成功");
			    			layer.close(index);
			    			active.reload.call();
			    		}else{
			    			if(res.msg){
			    				layer.msg(res.msg);
			    			}
			    		}
			    	}
			    });
			};
			//修改编辑角色
			function editRoles(fromId,index){
				var fromObj = $('#'+fromId);
				var id = $('#editId').val();
				var name = $('#editName').val();
		 		var code = $('#editCode').val();
		 		var note = $('#editNote').val();
		 		var state = $('#editState').val()?$('#editState').val():1;
		 		$.ajax({
			    	url: localStorage.serverHttp+'/base/auth/role/update?_token='+(new parent.window._user()).getData('token'),
			    	type: 'post',
			    	dataType: 'json',
			    	data : {
			    		id: id,
			    		name: name,
			    		code: code,
			    		note: note,
			    		state: state
			    	}
			    })
			    .done(function(res) {
			    	if (res) {
			    		if(1 == res.status){
			    			layer.msg("修改角色信息成功");
			    			layer.close(index);
			    			active.reload.call();
			    		}else{
			    			if(res.msg){
			    				layer.msg(res.msg);
			    			}
			    		}
			    	}
			    });
			}
		});
		
		function initXTree(){
			layui.use('form', function () {  
		        var form = layui.form;
			    xtree = new layuiXtree({
			        elem: 'xtree'
			        , form: form
			        , data: xtreeJson
			        , isopen: true  //加载完毕后的展开状态，默认值：true
			        , ckall: false    //启用全选功能，默认值：false
			        , ckallback: function () { } //全选框状态改变后执行的回调函数
			        , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
			            open: "&#xe7a0;"       //节点打开的图标
			            , close: "&#xe622;"    //节点关闭的图标
			            , end: "&#xe621;"      //末尾节点的图标
			        }
			        , color: {       //三种图标颜色，独立配色，更改几个都可以
			            open: "#EE9A00"        //节点图标打开的颜色
			            , close: "#EEC591"     //节点图标关闭的颜色
			            , end: "#828282"       //末级节点图标的颜色
			        }
			        , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
			            // console.log(data.elem); //得到checkbox原始DOM对象
			            // console.log(data.elem.checked); //开关是否开启，true或者false
			            // console.log(data.value); //开关value值，也可以通过data.elem.value得到
			            // console.log(data.othis); //得到美化后的DOM对象
			        }
			    });
			    window.onclick = function() {
			    	/* var oCks = xtree.GetChecked(); //获取全部选中的末级节点checkbox对象，返回的为Array  
					for (var i = 0; i < oCks.length; i++) {  
					    console.log(oCks[i].value);  
					} */
			    };
		    });
		}
		/*将一般的JSON格式转为xTree树控件的JSON格式
        * @param rows:json数据对象
        * @param idFieldName:表id的字段名
        * @param pidFieldName:表父级id的字段名
        */
        function ConvertToTreeGridJson(rows, idFieldName, pidFieldName) {
        	function exists(rows, parentId) {
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i][idFieldName] == parentId)
                        return true;
                }
                return false;
            }
        	var nodes = [];
        	//根节点
        	for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                if (!exists(rows, row[pidFieldName])) {
                    var data = {
                        value: row[idFieldName]
                    }
                    data.title = row.name;
                    data.data = [];
                    nodes.push(data);
                }
            }
            
            var toDo = [];
            for (var i = 0; i < nodes.length; i++) {
                toDo.push(nodes[i]);
            }
            while (toDo.length) {
                var node = toDo.shift(); // the parent node
                // 得到相应的子节点
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    if (row[pidFieldName] == node.value) {
                        var child = {
                        	value: row[idFieldName]
                        };
                        child.title = row.name;
                        child.data = [];
                        if (node.data) {
                            node.data.push(child);
                        } else {
                            node.data = [child];
                        }
                        toDo.push(child);
                    }
                }
            }
            return nodes;
        }
	</script>
</body>
</html>